import '@css/common.scss'
import './style.scss'

import html2canvas from 'html2canvas'
import Swal from 'sweetalert2'
import 'canvas-toBlob'
import {
	saveAs
} from 'file-saver';


const _src = window.location.search.split('?src=')

let rightImg = 200
if (_src[1] !== '') {
	document.querySelector('#Img').setAttribute('src', _src[1])
	document.querySelector('#edit').className = 'img-layer relative overflow-hidden mr-200'
}

var isFileSaverSupported = false
try {
	isFileSaverSupported = !!new Blob;
} catch (e) {
	console.error(e)
}

document.querySelector('#Img').onload = function() {
	const Toast = Swal.mixin({
		toast: true,
		position: 'top',
		showConfirmButton: false,
		timer: 4000,
		didOpen: (toast) => {
			toast.addEventListener('mouseenter', Swal.stopTimer)
			toast.addEventListener('mouseleave', Swal.resumeTimer)
		}
	})

	Toast.fire({
		icon: 'success',
		title: '图片加载完毕可以编辑了'
	})

	if (this.height < 450) {

		const _scalH = this.height / 75
		const _scalW = 750 / 75
		let _width = (450 / _scalH) * _scalW

		this.style.maxWidth = _width + 'px'
		this.style.width = _width + 'px'
		this.style.height = '450px'
		this.style.position = 'absolute'
		this.style.zIndex = '10'
		this.style.left = '50%'
		this.style.marginLeft = -_width / 2 + 'px'
	}
}

document.querySelector('#waterMark').onchange = function(e) {
	const c_class = document.querySelector('#waterMarkContent').className
	const t_class = document.querySelector('#editContent').className
	if (e.target.checked) {
		document.querySelector('#waterMarkContent').className = c_class.replace(' hidden', '')
		document.querySelector('#editContent').className = t_class.replace(' hidden', '')
	} else {
		document.querySelector('#waterMarkContent').className += ' hidden'
		document.querySelector('#editContent').className += ' hidden'
	}
}

document.querySelector('#editContent').oninput = function(e) {
	document.querySelector('.p').innerText = e.target.value.trim()
}

document.querySelector('#setImgRight').onclick = function(e) {
	rightImg += 20
	document.querySelector('#edit').style.marginRight = rightImg + 'px'
}

document.querySelector('#GetImg').onclick = function(e) {
	html2canvas(document.querySelector("#edit"), {
		allowTaint: false,
		useCORS: true,
	}).then(canvas => {
		let dataUrl = canvas.toDataURL('image/jpeg');
		let fileName = `img_${Date.now()}.jpg`
		if (isFileSaverSupported) {
			try {
				canvas.toBlobHD(function(blob) {
					swalFunc(dataUrl, () => {
						saveAs(blob, fileName)
					})
				}, 'image/jpeg', 0.96)
			} catch (err) {
				console.error(err)
				canvas.toBlob(function(blob) {
					swalFunc(dataUrl, () => {
						saveAs(blob, fileName)
					})
				}, 'image/jpeg')
			}
		} else {
			swalFunc(dataUrl, () => {
				let a = document.createElement('a')
				let event = new MouseEvent('click')
				a.download = fileName
				a.href = dataUrl
				a.dispatchEvent(event)
			})
		}
	})


}

function swalFunc(viewUrl, func = function() {}) {
	Swal.fire({
		title: '生成成功',
		text: '如预览图效果不佳，请重新编辑',
		imageUrl: viewUrl,
		imageAlt: 'Custom image',
		confirmButtonColor: '#68d391',
		confirmButtonText: '下载图片',
		showCancelButton: true,
		cancelButtonColor: '#a0aec0',
		cancelButtonText: '重新编辑',
	}).then((isConfirm) => {
		if (isConfirm.value) {
			func()
		}
	});
}
